<div class="model-container">
  <div class="model-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectName}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        场景列表
      </b>
    </div>
    <div class="head-right">
      <button nz-button nzType="primary" *ngIf="status.PIpageAuthorty.PIModels" (click)="addModelGroup()">新建场景</button>
      <nz-input-group nzSearch [nzSuffix]="suffixButton" style="width: 340px;margin-left: 25px;">
        <input maxlength="50" type="text" nz-input placeholder="请输入关键字" [(ngModel)]="findJson.filter">
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" (click)="search()" nzSearch>搜索</button>
      </ng-template>
    </div>
  </div>
  <!-- 场景列表 -->
  <div class="model-body">
    <div nz-row class="body">
      <div nz-col nzSpan="6" class="card" *ngFor='let item of modelGroupLists'
        (mouseover)="item.iconStyle = { 'display': 'inline-block' }"
        (mouseout)="item.iconStyle = { 'display': 'none' }">
        <div class="card-left" (click)="routerTo(item)">
          <div class="img" [ngStyle]="item.img" [ngStyle]="item.img"></div>
        </div>
        <div class="card-right">
          <div class="right-title" [ngStyle]="item.jwStatus == 0 ? { 'color': 'gray' }
          :item.jwStatus == 2 ? { 'color': 'green'}
          :item.jwStatus == 3 ? { 'color': 'red' }
          :item.jwStatus == 1 ? { 'color': 'blue ' }
          :''">
            {{ item.jwStatus==1?'审核中':item.jwStatus==2?'已通过':item.jwStatus==3?'未通过':'' }}
          </div>
          <div class="right-icon">
            <!-- <i nz-icon type="profile" theme="outline"></i> -->
            <!-- 该场景下模型列表 -->
            <i nz-icon type="profile" title="模型列表" theme="outline" class="delete" [ngStyle]='item.iconStyle'
              *ngIf="status.PIpageAuthorty.PIModels" (click)="showModelList(item)"></i>
            <!-- 编辑场景 -->
            <i nz-icon type="form" theme="outline" title="编辑场景" class="delete" *ngIf="status.PIpageAuthorty.PIModels"
              [ngStyle]='item.iconStyle' (click)="editModelGroup(item)"></i>
            <!-- 删除场景 -->
            <i nz-icon type="delete" theme="outline" title="删除场景" class="delete" *ngIf="status.PIpageAuthorty.PIModels"
              [ngStyle]='item.iconStyle' (click)="RemoveModelGroup(item)"></i>
            <!-- <i nz-icon type="share-alt" class="delete" [ngStyle]='item.iconStyle' theme="outline"></i> -->
          </div>
          <div style="clear: both;"></div>
          <div style="margin-top: 12px;" (click)="routerTo(item)">
            <div class="right-list">
              <span class="span-one">{{item.name}}</span>
            </div>
            <div class="right-list">
              <span class="span-two">
                创建人：{{item.creatorUserName}}
              </span>
            </div>
            <div class="right-list">
              <span class="span-two">
                时间：{{item.creationTime|dateTimePipe}}
              </span>
            </div>
            <!-- <div class="right-list">
              <span class="span-two">
                文件大小：{{item.size|size}}M
              </span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <nz-pagination [nzPageSize]="findJson.maxResultCount" [nzPageIndex]="nzPageIndex" [nzTotal]="nzTotal"
        (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate"></nz-pagination>
      <ng-template #totalTemplate let-total>
        共{{nzTotal}}条
      </ng-template>
    </div>
  </div>
</div>



<!-- 编辑模型-->
<!-- <nz-modal [(nzVisible)]="isEditVisible" [nzTitle]="modalEditTitle" [nzContent]="modalEditContent"
  [nzFooter]="modalEditFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalEditTitle>
    修改模型
  </ng-template>

  <ng-template #modalEditContent>
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        模型名称
      </div>
      <div nz-col nzSpan=20>
        <input maxlength="50" nz-input placeholder="模型名称" [(ngModel)]="editModelInfo.name" style="width: 300px;">
      </div>
    </div>
  </ng-template>

  <ng-template #modalEditFooter>
    <button nz-button nzType="primary" (click)="handleEditOk()" style="width: 150px"
      [nzLoading]="addLoading">提交</button>
  </ng-template>
</nz-modal> -->


<!-- 新建场景 -->
<nz-modal [(nzVisible)]="isAddGroupVisible" [nzTitle]="modalGroupAddTitle" [nzContent]="modalGroupAddContent"
  [nzMaskClosable]="false" [nzFooter]="modalGroupAddFooter" (nzOnCancel)="CancelGroup()">
  <ng-template #modalGroupAddTitle>
    新建场景
  </ng-template>

  <ng-template #modalGroupAddContent>
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        场景名称
      </div>
      <div nz-col nzSpan=20>
        <input maxlength="50" nz-input placeholder="场景名称" style="width: 300px;" [(ngModel)]="GroupModelName">
        <span style="color: red;margin-left: 5px">*</span>
      </div>
    </div>

    <div nz-row class="modal-text">
      <div nz-col nzSpan=4 class="modal-left">
        场景封面
      </div>
      <div nz-col nzSpan=20>
        <div class="upload" (click)="uploadImg.click()" *ngIf='imgShow'>
          <div class="top">
            <i nz-icon type="plus" theme="outline"></i>
          </div>
          <div class="bottom">
            <span>上传图片</span>
          </div>
        </div>
        <div class="upload" [ngStyle]="imgStyle" *ngIf='!imgShow' (click)="uploadImg.click()"></div>
        <input type="file" class="input-file" (change)="fileImgChange($event)" [accept]="imgType" #uploadImg>
        <nag-file-uploader style="display: none" [autoUpload]="true" [flowFiles]="imgQueue" [multiple]="false"
          (onSuccess)="imgSuccess($event)" [fileHost]="FILEURL" #imageUploader></nag-file-uploader>
      </div>
    </div>
  </ng-template>

  <ng-template #modalGroupAddFooter>
    <button nz-button nzType="primary" (click)="handleAddGroupOk()" [nzLoading]="addLoading">提交</button>
  </ng-template>
</nz-modal>

<!-- 修改模型组 -->
<nz-modal [(nzVisible)]="isEditGroupVisible" [nzTitle]="modalGroupEditTitle" [nzContent]="modalGroupEditContent"
  [nzMaskClosable]="false" [nzFooter]="modalGroupEditFooter" (nzOnCancel)="CancelGroup()">
  <ng-template #modalGroupEditTitle>
    {{GroupModelName}}
  </ng-template>

  <ng-template #modalGroupEditContent>
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        场景名称
      </div>
      <div nz-col nzSpan=20>
        <input maxlength="50" nz-input placeholder="场景名称" [(ngModel)]="GroupModelName" style="width: 300px;">
      </div>
    </div>

    <div nz-row class="modal-text">
      <div nz-col nzSpan=4 class="modal-left">
        场景封面
      </div>
      <div nz-col nzSpan=20>
        <div class="upload" (click)="uploadImg.click()" *ngIf='imgShow'>
          <div class="top">
            <i nz-icon type="plus" theme="outline"></i>
          </div>
          <div class="bottom">
            <span>上传图片</span>
          </div>
        </div>
        <div class="upload" [ngStyle]="imgStyle" *ngIf='!imgShow' (click)="uploadImg.click()"></div>
        <input type="file" class="input-file" (change)="fileImgChange($event)" [accept]="imgType" #uploadImg>
        <nag-file-uploader style="display: none" [autoUpload]="true" [flowFiles]="imgQueue" [multiple]="false"
          (onSuccess)="imgSuccess($event)" [fileHost]="FILEURL" #imageUploader></nag-file-uploader>
      </div>
    </div>
  </ng-template>

  <ng-template #modalGroupEditFooter>
    <button nz-button nzType="primary" (click)="handleEditGroupOk()" [nzLoading]="addLoading">提交</button>
  </ng-template>
</nz-modal>


<!-- 模型组模型管理页面 -->

<nz-modal [(nzVisible)]="isShowGroupModelList" [nzTitle]="modalGROUPEditTitle" [nzContent]="modalGROUPEditContent"
  [nzMaskClosable]="false" nzWidth='60%' [nzFooter]="modalSaveFooter" (nzOnCancel)="handleGroupCancel()">
  <ng-template #modalGROUPEditTitle>
    {{GroupModelTitle}}
    <span [ngStyle]=" currentModelGroup.jwStatus == 2 ? { 'color': 'green'}
                                            :currentModelGroup.jwStatus == 3 ? { 'color': 'red' }
                                            :currentModelGroup.jwStatus == 1 ? { 'color': 'blue ' }
                                            :''">
      {{ currentModelGroup.jwStatus==1?'审核中' 
        : currentModelGroup.jwStatus==2?'已通过' 
        : currentModelGroup.jwStatus==3?'未通过':'' }}
    </span>
  </ng-template>

  <ng-template #modalGROUPEditContent>

    <div style="height: 50px;">
      <!-- 2019.6.19 修改为只在该场景完全通过的情况下才不显示上传模型及提交审核按钮  -->
      <button nz-button nzType="primary" (click)="uploadModel.click()"
        *ngIf=" isaudit && modelShow && status.PIpageAuthorty.PIModels" style="margin-bottom: 20px;">上传模型
      </button>

      <button nz-button nzType="primary" (click)="subAudit()"
        *ngIf="modelShow && status.PIpageAuthorty.PIModels && isbtn" style="margin-bottom: 20px;float: right;">提交审核
      </button>
      <!-- <button nz-button nzType="primary" (click)="resAudit()" *ngIf="modelShow && status.PIpageAuthorty.PIModels"
   style="margin-bottom: 20px;float: right;">审核结果
 </button> -->


      <!-- <span style="color: red;margin-left: 5px;" *ngIf="modelShow">*</span> -->
      <input type="file" class="input-file" (change)="fileModelChange($event)" [accept]="modelType" #uploadModel>
      <nag-file-uploader [ngStyle]="modelStyle" style="margin-bottom: 20px;" [autoUpload]="true"
        [flowFiles]="modelQueue" [multiple]="false" (onSuccess)="modelSuccess($event)" [fileHost]="FILEURL"
        (onRemove)="reModel()" #modelUploader>
      </nag-file-uploader>

    </div>




    <nz-table #smallTable nzSize="small" [nzData]="modelLists">
      <thead>
        <tr>
          <th>模型名称</th>
          <th>上传人</th>
          <th>上传时间</th>
          <th>文件大小</th>
          <th *ngIf="isauditstatus">审核状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor='let item of modelLists'>
          <td>{{item.fileName}}</td>
          <td>{{item.creatorUserName}}</td>
          <td>{{item.creationTime|dateTimePipe}}</td>
          <td>{{item.size|size}}M</td>
          <td *ngIf="isauditstatus" [ngStyle]=" item.jwStatus == 0 ? { 'color': 'gray' }
                         :item.jwStatus == 2 ? { 'color': 'green'}
                         :item.jwStatus == 3 ? { 'color': 'red' }
                         :item.jwStatus == 1 ? { 'color': 'blue ' }
                         :''">
            {{  item.jwStatus == 0?'未审核'
               :item.jwStatus == 2  ? '已通过'
               :item.jwStatus == 3 ? '未通过'
               :item.jwStatus == 1  ? '审核中' 
               : '-'}}
          </td>
          <td>
            <!-- 2019.6.19 只在该模型组审核结束并通过时，不显示删除按钮 -->
            <i nz-icon type="delete" title="删除模型" theme="outline" class="deletemodle" style="margin-left: 0;"
              [ngStyle]='item.iconStyle' *ngIf=" item.jwStatus == 0 && isDel" (click)="deleteModel(item)">
            </i>
            <i nz-icon type="info-circle" *ngIf="isauditstatus" title="查看审查结果" theme="outline" class="deletemodle"
              [ngStyle]='item.iconStyle' (click)="resAudit(item)">
            </i>
            <!-- 2019.6.19 去掉替换接口 -->
            <i nz-icon title="替换模型" type="swap" *ngIf=" item.jwStatus == 3" [ngStyle]='item.iconStyle'
              class="deletemodle" theme="outline" (click)="swapModel(item)"></i>
            <!-- <button nz-button nzType="small" title="查看审查结果"   (click)="resAudit(item)">审查结果</button> -->
          </td>
        </tr>
      </tbody>
    </nz-table>
  </ng-template>

  <ng-template #modalSaveFooter>
    <!-- <p>2019年提交的XXX模型未通过审核</p> -->
    <button nz-button nzType="primary" (click)="goanalysisModel()" style="width: 150px"
      [nzLoading]="addLoading">保存</button>
  </ng-template>
</nz-modal>

<!-- 上传模型审核 -->
<nz-modal [nzZIndex]='1110' nzWidth="60%" [(nzVisible)]="subAuditVisible" [nzTitle]="subAuditTitle"
  [nzMaskClosable]="false" [nzContent]="subAuditContent" [nzFooter]="subAuditFooter" (nzOnCancel)="subAuditCancel()">
  <ng-template #subAuditTitle>
    模型审核
  </ng-template>
  <ng-template #subAuditContent>
    <div nz-row>
      <label nz-col nzSpan="4" style="line-height: 32px">项目编号</label>
      <input [disabled]='isConvert' maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.pro.code"
        style="width: 70%; margin-right:8px;" placeholder="请输入项目编号"> <span style=" color:red"> *</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目名称</label>
      <input [disabled]='isConvert' maxlength="10" nz-col nzSpan="20" nz-input [(ngModel)]="status.pro.name"
        style="width: 70%; margin-right:8px;" placeholder="请输入项目名称"> <span style=" color:red"> *</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目区域</label>

      <nz-select style="width:70%;margin-right: 8px;" [(ngModel)]="status.pro.aera" nzPlaceHolder="请选择项目区域"
        (ngModelChange)="selChange($event)" [compareWith]="compareFn">
        <nz-option *ngFor="let option of status.pro.aeraArr" [nzLabel]="option.label" [nzValue]="option"></nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目类型</label>

      <nz-select style="width:70%;margin-right: 8px;" [(ngModel)]="status.pro.type" nzPlaceHolder="请选择类型"
        (ngModelChange)="selChange($event)" [compareWith]="compareFn">
        <nz-option *ngFor="let option of status.pro.typeArr" [nzLabel]="option.label" [nzValue]="option"></nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目阶段</label>

      <nz-select style="width:70%;margin-right: 8px;" [(ngModel)]="status.pro.step" nzPlaceHolder="请选择阶段"
        (ngModelChange)="selChange($event)" [compareWith]="compareFn">
        <nz-option *ngFor="let option of status.pro.stepArr" [nzLabel]="option.label" [nzValue]="option"></nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目进度</label>
      <nz-select style="width:70%;margin-right: 8px;" (ngModelChange)="selChange($event)"
        [(ngModel)]="status.pro.progress" [compareWith]="compareFn" nzPlaceHolder="请选择项目进度">
        <nz-option *ngFor="let option of status.pro.progressArr" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">项目信息</label>
      <input [disabled]='isConvert' maxlength="50" type="text" nz-col nzSpan="20" nz-input [(ngModel)]="status.pro.info"
        style="width: 70%; margin-right:8px;" placeholder="项目信息"> <span style=" color:red"> *</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">场景名称</label>
      <input [disabled]='isConvert' maxlength="50" type="text" nz-col nzSpan="20" nz-input
        [(ngModel)]="status.pro.modelName" style="width: 70%; margin-right:8px;" placeholder="模型文件名称"> <span
        style=" color:red"> *</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">文件类型</label>
      <nz-select style="width:70%;margin-right: 8px;" (ngModelChange)="selChange($event)"
        [(ngModel)]="status.pro.fileType" [compareWith]="compareFn" nzPlaceHolder="模型类型">
        <nz-option *ngFor="let option of status.pro.fileTypeArr" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">模型类型</label>
      <nz-select style="width:70%;margin-right: 8px;" (ngModelChange)="selChange($event)"
        [(ngModel)]="status.pro.modelType" [compareWith]="compareFn" nzPlaceHolder="模型类型">
        <nz-option *ngFor="let option of status.pro.modelTypeArr" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">基础/进度</label>
      <nz-select style="width:70%;margin-right: 8px;" (ngModelChange)="selChange($event)"
        [(ngModel)]="status.pro.modelprogress" [compareWith]="compareFn" nzPlaceHolder="基础/进度">
        <nz-option *ngFor="let option of status.pro.modelprogressArr" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>


  </ng-template>
  <ng-template #subAuditFooter>
    <button nz-button nzType="primary" (click)="handlesubAuditOk()" style="width: 150px"
      [nzLoading]="addLoading">提交</button>
  </ng-template>
</nz-modal>

<!-- 审核结果列表页 -->

<nz-modal [(nzVisible)]="isShowModelResList" [nzTitle]="modalResTitle" [nzContent]="modalResContent" nzWidth='60%'
  [nzFooter]="null" (nzOnCancel)="closeAuditResCancel()">
  <ng-template #modalResTitle>
    <!-- {{GroupModelTitle}} -->
    审核结果
  </ng-template>

  <ng-template #modalResContent>
    <!-- <button nz-button nzType="primary" style="margin-bottom: 20px" *ngIf="status.PIpageAuthorty.PIModels"
      (click)="addModel()">关联模型 </button> -->

    <nz-table #smallTable nzSize="small" [nzData]="modelResLists">
      <thead>
        <tr>
          <th>专家</th>
          <th>专业</th>
          <th>结果</th>
          <th>评语</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor='let item of modelResLists'>
          <td>{{item.name}}</td>
          <td>{{item.profession}}</td>
          <td>
            <span *ngIf="item.status==0">未评价</span>
            <span *ngIf="item.status==1" style="color:green">已通过</span>
            <span *ngIf="item.status==2" style="color:red">未通过</span>
          </td>
          <!-- <td>{{item.size|size}}M</td> -->
          <td class="userReviews">{{item.userReviews }}</td>

        </tr>
      </tbody>
    </nz-table>
  </ng-template>

  <!-- <ng-template #modalSaveFooter>
    <p>2019年提交的XXX模型未通过审核</p>
    <button nz-button nzType="primary" (click)="goanalysisModel()" style="width: 150px"
      [nzLoading]="addLoading">发起模型解析</button>
  </ng-template> -->
</nz-modal>